// 合作客户logo墙 start
.logo-case-wrapper {
  width: 1360px;
  margin: 0 auto;
  padding-bottom: 50px;
  overflow: hidden;
  --wall-item-height: 100px;
  --wall-item-width: 210px;
  --wall-item-number: 7;
  --duration: 50s;
}

@keyframes scrolling {
  to {
    transform: translateX(calc(var(--wall-item-width) * -1));
  }
}

.wall {
  height: var(--wall-item-height);
  width: 100%;
  position: relative;
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
}

.wall .wall-item {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(calc(var(--wall-item-width) * var(--wall-item-number)));
  height: var(--wall-item-height);
  width: var(--wall-item-width);
  animation: scrolling var(--duration) linear infinite;
  cursor: pointer;
  object-fit: fill;
  padding: 20px;
}

.wall[data-direction="reverse"] .wall-item {
  animation-direction: reverse;
}

.wall .wall-item {
  @for $i from 1 through 16 {
    &:nth-child(#{$i}) {
      animation-delay: calc(
        (var(--duration) / var(--wall-item-number)) *
          (var(--wall-item-number) - #{$i}) *
          -1
      );
    }
  }
}

.wall:has(.wall-item:hover) .wall-item {
  animation-play-state: paused;
}

// 合作客户logo墙 end
